<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!--
            图片标签用于向当前页面中引入一个外部图片
                使用img标签来引入外部图片，img标签是一个自结束标签
                img这种元素属于替换元素(基于块和行内元素之间)
                属性:
                    src 属性指定的是外部图片的路径(路径规则和超链接是一样的)

                    alt 图片的描述,这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
                        搜索引擎会根据alt中的内容来识别图片，如果不写alt，图片就无法被搜索引擎识别到

                    width 图片的宽度(单位是像素)
                    height 图片的高度
                        - 宽度和高度中如果只修改了一个，则另一个会等比例缩放


                    注意:
                        一般在pc端，不建议修改图片的大小，需要多大的图片就裁多大
                        但是在移动端，经常需要对图片缩放(大图缩小)

                    图片的格式:
                        jpeg(jpg)
                            - 支持的颜色比较丰富，不支持透明效果，不支持动图
                            - 一般用来显示照片
                        gif
                            - 支持的颜色比较少，支持简单透明，支持动图
                            - 适合颜色单一的图片，动图
                        png(网页中使用最多)
                            - 支持的颜色丰富，支持复杂度，不支持动图
                            - 颜色丰富，复杂透明图片(专为网页而生)
                        webp
                            - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
                            - 它具备其他图片格式的所有优点，而且文件还特别的小
                            - 缺点: 兼容性不好，对一些老的浏览器不支持

                        base64
                            - 将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片
                            - 一般都是一些需要和网页一起加载的图片才会使用base64


                        效果一样，用小的，因为小的会加载更快
                        效果不一样，用效果好的
                        (效果和大小要取平衡)



         -->
        <img src="./img/1.gif" alt="松鼠">


        <!--
            直接引入外部网络地址
               本质是重定向
           这种方式不建议用，因为属于盗取别的网站的图片，如果它删除了图片，这个地址就失效了
         -->
        <img width="500" height="600"
            src="https://img1.baidu.com/it/u=603192675,2714729925&fm=26&fmt=auto"
            alt="钢铁侠">

        <img
            src="">
    </body>
</html>